$(function() {
    var layer = layui.layer
    var form = layui.form
    var laypage = layui.laypage
    var table = layui.table
    var obj = {
        id: '',
        page: 1,
        limit: 10,
        tagname: ''
    }
    $('#btn-add').on('mouseover', function() {
        $(this).addClass('layui-btn-normal').removeClass('btn-add')
    })
    $('#btn-add').on('mouseout', function() {
        $(this).removeClass('layui-btn-normal').addClass('btn-add')
    })

    $('#btn-derive').on('mouseover', function() {
        $(this).addClass('layui-btn-warm ').removeClass('btn-derive')
    })
    $('#btn-derive').on('mouseout', function() {
        $(this).removeClass('layui-btn-warm ').addClass('btn-derive')
    })



    var flag = 1

    // if (flag) {
    //     $('#tab-id').html('标签名称')
    //     flag = false
    // } else {
    //     $('#tab-name').html('ID')
    //     flag = true
    // }


    function initTable() {
        $.ajax({
            method: 'GET',
            url: '/ydd_tag/list',
            data: obj,
            success: function(res) {
                var htmlStr = template('tagTally', res.data)
                $('tbody').html(htmlStr)
                renderPage(res.data.count)
            }

        })
    }
    initTable()
    $('#form-search').on('submit', function(e) {
            e.preventDefault()
                // 获取表单中选中项的值
                // var id = $('[name=id]').val()
            var tagname = $('[name=tagname]').val()
                // 为查询参数对象 q 中对应的属性赋值
                // obj.cate_id = id
            obj.tagname = tagname
                // 根据最新的筛选条件，重新渲染表格的数据
            initTable()
        })
        // $('#form-search').on('submit', function(e) {
        //     e.preventDefault()
        //         // 获取表单中选中项的值
        //         // var id = $('[name=id]').val()
        //     var tagname = $('[name=tagname]').val()
        //         // 为查询参数对象 q 中对应的属性赋值
        //         // obj.cate_id = id
        //     obj.tagname = tagname
        //         // 根据最新的筛选条件，重新渲染表格的数据
        //     initTable()
        // })

    $('#btn-reset').on('click', function() {
        obj.tagname = ''
        initTable()
    })

    $('#btn-btoverturn').on('click', function() {
        $('#form-search').hide()
        $('#btn-upoverturn').show()
        $('#btn-btoverturn').hide()
    })
    $('#btn-upoverturn').on('click', function() {
        $('#form-search').show()
        $('#btn-upoverturn').hide()
        $('#btn-btoverturn').show()
    })

    function renderPage(total) {
        // console.log(total);
        // 使用laypage.render() 来渲染分页
        laypage.render({
            elem: 'pageBox', //分页容器的id
            count: total, //总数据的个数
            limit: obj.limit, //一页显示几条数据
            curr: obj.page, //默认显示的页码
            //定义每页条数的选择项
            limits: [10, 20, 30, 40],
            // 定义分页器中的组件
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 分页切换时会触发,render方法被调用也会触发jump
            // 里面有一个布尔值得参数first,如果是自动加载触发则是true
            // 如果是点击分页器触发则是undefined,
            jump: function(page, first) {
                // console.log(page.curr);
                obj.page = page.curr
                    // 赋值完成后需要再次调用initTable()方法
                    //直接调用会造成程序的死循环,因为initTable()中调用了renderPage()方法
                    // 当一条显示的最新的数据重新赋值给obj.pagesize
                obj.limit = page.limit
                if (!first) {
                    // 通过点击分页器,则对文章列表进行重新渲染
                    initTable()
                }
            }
        })

    }

    var indexAdd = null
    $('#btn-add').on('click', function() {
        indexAdd = layer.open({
            type: 1,
            area: ['864px', '230px'],
            title: '添加标签',
            content: $('#dialog-add').html(),
        })


    })
    $('body').on('click', '#cancle', function() {
        layer.close(indexAdd)
    })

    // 通过代理的形式，为 form-add 表单绑定 submit 事件
    $('body').on('submit', '#form-add', function(e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/ydd_tag/add',
            data: $(this).serialize(),
            success: function(res) {
                if (res.errno !== 0) {
                    return layer.msg('新增标签分类失败！')
                }
                initTable()
                layer.msg('新增标签分类成功！')
                    // 根据索引，关闭对应的弹出层
                layer.close(indexAdd)
            }
        })
    })


    // 通过代理的形式，为 btn-edit 按钮绑定点击事件
    var indexEdit = null
    $('tbody').on('click', '.btn-edit', function(e) {
        // 弹出一个修改文章分类信息的层
        indexEdit = layer.open({
            type: 1,
            area: ['864px', '230px'],
            title: '修改标签分类',
            content: $('#dialog-edit').html()
        })

        var id = $(this).attr('data-id')
            // 发起请求获取对应分类的数据
        $.ajax({
            method: 'POST',
            url: '/ydd_tag/rowInfo?id=' + id,

            success: function(res) {
                form.val('form-edit', res.data)
            }
        })
    })
    $('body').on('click', '#cancle', function() {
        layer.close(indexEdit)
    })

    // 通过代理的形式，为修改分类的表单绑定 submit 事件
    $('body').on('submit', '#form-edit', function(e) {
            e.preventDefault()
            $.ajax({
                method: 'POST',
                url: '/ydd_tag/update',
                data: $(this).serialize(),
                success: function(res) {
                    // console.log(res);
                    if (res.errno !== 0) {
                        return layer.msg('更新分类数据失败！')
                    }
                    layer.msg('更新分类数据成功！')
                    layer.close(indexEdit)
                    initTable()
                }
            })
        })
        // 通过代理的形式，为删除按钮绑定点击事件
    $('tbody').on('click', '.btn-delete', function() {
            var id = $(this).attr('data-id')
                // 提示用户是否要删除
            layer.confirm('确定删除吗,是否继续?', { icon: 3, title: '提示' }, function(index) {
                $.ajax({
                    method: 'GET',
                    url: '/ydd_tag/del?id=' + id,
                    success: function(res) {
                        if (res.errno !== 0) {
                            return layer.msg('删除分类失败！')
                        }
                        layer.msg('删除分类成功！')
                        layer.close(index)
                        initTable()
                    }
                })
            })
        })
        // var date = {}
        // $('#btn-derive').on('click', function() {

    //     $.ajax({
    //         method: 'GET',
    //         url: '/ydd_tag/all',
    //         success: function(res) {
    //             for (var i = 0; i < res.data.length; i++) {
    //                 id = res.data[i].id
    //                 tagname = res.data[i].tagname
    //                 date['id'] = id
    //                 date['tagname'] = tagname
    //                     // console.log(date);

    //             }
    //             table.exportFile('tagTally', date, 'xls')
    //         }
    //     })
    // })
    $('#btn-refresh').on('click', function() {
        $('.layui-table').css({
            'opacity': '0'

        });
        $('#pageBox').css('opacity', 'none');
        setTimeout(function() {
            $('.layui-table').css({
                'opacity': '1',
                // 'width': '100% !important'
            });
            $('#pageBox').css('display', 'block');
            initTable()
        }, 100)
    })
    var sp_id = document.querySelector('#sp-id')
    var sp_name = document.querySelector('#sp-name')
    $('#sp-id').on('click', function() {
        if (sp_id.checked) {
            $('.tab-id').show()
        } else {
            $('.tab-id').hide()
        }
    })
    $('#sp-name').on('click', function() {
        if (sp_name.checked) {
            $('.tab-name').show()
        } else {
            $('.tab-name').hide()
        }
    })
    var falg = true
    $('#person').on('click', function() {
        if (falg) {
            $('.hibox').show()
            falg = false
        } else {
            $('.hibox').hide()
            falg = true
        }
    })

    function tableToExcel() {

        // 要导出的json数据
        var jsonData = [{
                ID: 28,
                标签名称: '科技',

            }, {
                ID: 23,
                标签名称: '娱乐',
            }, {
                ID: 22,
                标签名称: '军事',
            }, {
                ID: 21,
                标签名称: '资深吃货',
            },
            {
                ID: 20,
                标签名称: '懒癌患者',
            },
            {
                ID: 19,
                标签名称: '手机控',
            },
            {
                ID: 18,
                标签名称: '诗歌',
            },
            {
                ID: 17,
                标签名称: '文字控',
            },
            {
                ID: 16,
                标签名称: '汉服',
            },
            {
                ID: 15,
                标签名称: '摄影',
            },
        ]

        //列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `ID,标签名称\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i = 0; i < jsonData.length; i++) {
            for (let item in jsonData[i]) {
                str += `${jsonData[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        var link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = "标签信息.xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    $('#btn-derive').on('click', function() {

        tableToExcel()
    })

})